
import React from 'react';
import { Bubble } from '@ant-design/x';
import useStyle from '../../views/Index';
import logo from "../../assets/images/avatar.png";
// import Logo from "../../assets/images/ai-avatar.svg"; // 直接导入 SVG 文件

const roles = {
  assistant: {
    placement: 'start',
    header:process.env.REACT_APP_LOGO_NODE_TITLE,
    variant:'borderless',
    avatar: {
      icon: <img src={logo} alt="avatar" />,
      style: {
        // background: '#fde3cf',
        width: '2.5rem',  // 根据需要调整尺寸
        height: '2.5rem',
      },
    },
  },
  user: {
    placement: 'end',
    variant: 'filled',
  },
};


const BubbleChat = ({items, placeholderNode,  RenderMarkdown}) => {
  const {styles }= useStyle();
  const listRef = React.useRef(null);

  return (

      <Bubble.List
        ref={listRef}
        typing={{
          step: 5,
          interval: 20,
          suffix: <>💗</>,
        }}
        // header="健康管家"
        roles={roles}
        items={
          items.length > 0
            ? items
            : [
                {
                  content: placeholderNode,
                  variant: 'borderless',
                },
              ]
        }
        className={styles.messages}
        autoScroll={true}
        messageRender={RenderMarkdown}
      />
  );
};
export default BubbleChat;